<template>
  <div style=" background-color:#fff;height:100%">
    <br>
    <!-- <checker v-model="fuwlx" default-item-class="radio-item" selected-item-class="radio-item-selected" radio-required >
      <checker-item v-for="item in fwlxlist" :key="item.foodId" :value="item"> {{item.mingc}}</checker-item>
    </checker>
   <divider>选择后提示</divider> -->
    <box gap="10px 10px">
      <transition v-for="(item,index) in fwlxlist" :key="index">
        <!-- <x-button plain type="primary" class="custom-primary-red" @click.native="btn_click(item)" ref="">{{item.mingc}}</x-button> -->
        <v-button :Data="item" :indexData="index" :keyData="business.id+'-'+index" @callback="timeEnd" @vOnClick="btn_click" ref ="vbtnRef"></v-button>
      </transition>
    </box>
    <br>
    <!-- <input type="number" v-model="fcode">
    <x-button plain type="primary" class="custom-primary-red" @click.native="btn_click_fcode">验证</x-button> -->
    <div v-transfer-dom>
      <confirm v-model="dialog" confirm-text="是" cancel-text="否" @on-confirm="sendFw">
        <p>是否要呼叫[{{lxmingc}}]服务？</p>
      </confirm>
    </div>
  </div>
</template>
<script>
import { sign, signStr } from "@/assets/js/sign.js";
import { XButton, Box, Confirm, TransferDom } from "vux";
import VButton from "@/components/base/v-button";
export default {
  directives: {
    TransferDom
  },
  components: {
    XButton,
    Box,
    Confirm,
    VButton
  },
  data() {
    return {
      fuwlx: null,
      btnindex:0,
      lxmingc: "",
      fwlxlist: [],
      business: null,
      czinfo: null,
      dialog: false,
      fcode: ""
      
    };
  },
  methods: {
    refresh() {
      let params = sign("/v1/api/GetFuwLx");
      params.append("sjid", this.business.id);
      this.$http
        .post("GetFuwLx", params)
        .then(res => {
          if (res.data.code === 1) {
            this.fwlxlist = [];
            this.fwlxlist = res.data.resultObject;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    btn_click(_item,_index) {
      this.fuwlx = _item;
      this.lxmingc = _item.mingc;
      this.dialog = true;
      this.btnindex = _index;
    },
    sendFw() {
      let params = sign("/v1/api/goods/sendFuw");
      params.append("sjid", this.business.id);
      params.append("canzh", this.czinfo.zhuoh);
      params.append("msg", this.fuwlx.mingc);
      this.$http
        .post("goods/sendFuw", params)
        .then(res => {
          if (res.data.code === 1) {
            let _time = new Date().getTime()+(1000*60*5)
            this.$refs.vbtnRef[this.btnindex].setEndTime(_time);
            this.$vux.toast.text(res.data.msg, "top");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    btn_click_fcode() {
      let params = sign("/v1/api/goods/getOrderByQrOrFCode");
      params.append("sjid", this.business.id);
      params.append("QrFcode", this.fcode);
      this.$http
        .post("goods/getOrderByQrOrFCode", params)
        .then(res => {
          if (res.data.code === 1) {
            console.log(res.data.resultObject.foodList);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    timeEnd(_index){

    }
  },
  created() {
    this.business = this.$store.state.sellerInfo
    this.czinfo =  this.$store.state.czInfo;
    this.refresh();
    
  }
};
</script>

<style lang="less">
.custom-primary-red {
  border-radius: 99px !important;
  border-color: #ffa500 !important;
  color: #ffa500 !important;

  &:active {
    border-color: rgba(206, 60, 57, 0.6) !important;
    color: rgba(206, 60, 57, 0.6) !important;
    background-color: transparent;
  }
}
</style>